<template>
  <div class="DetailView" v-if="goodsData">

    <!-- 轮播 -->
    <div class="swpper" v-if="goodsData">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item class="item" v-for="(item, index) in goodsData.DetailNew.ProductImages" :key="index">
          <div class="img"><img :src="item" alt=""></div>
        </van-swipe-item>

      </van-swipe>
    </div>
    <!-- 轮播 End-->
    <!-- 信息 -->
    <div class="xinxi">
      <div class="top">
        <div class="left">
          <p class="fist">￥{{ goodsData.DetailNew.OriginalPrice }}</p>
          <p class="unfist">登录后查看更多会员价,去登录></p>
          <b>{{ goodsData.DetailNew.ProductName }}</b>
        </div>
        <div class="riget">
          <span>
            <svg viewBox="0 0 1080 1024" width="14px" height="14px" style="display: block;">
              <path
                d="M811.915516 953.795932a42.552747 42.552747 0 0 0 16.725277-41.870083L779.37518 642.842302l12.117293-11.605295 182.498947-174.420752c11.605295-11.775961 15.587504-28.44435 9.898634-46.022958a38.570538 38.570538 0 0 0-32.426559-27.875462l-269.8231-47.900285-6.883533-14.222175-114.516952-236.088102a39.822089 39.822089 0 0 0-35.669214-22.584813 41.585639 41.585639 0 0 0-36.351879 24.120808l-120.604042 248.660505-15.359949 2.844435-255.999147 47.21762a39.822089 39.822089 0 0 0-32.881668 28.216795 48.810504 48.810504 0 0 0 10.979519 44.657629l195.526459 184.945161-3.185767 16.782166-48.070951 252.870268c-2.844435 14.506618 4.152875 31.743894 16.839055 41.414973 11.37774 8.647082 28.615016 9.841745 42.325192 2.389326l246.840067-124.244919 245.019627 124.301808c7.054199 3.583988 14.791062 5.68887 19.911045 5.688869a33.450555 33.450555 0 0 0 22.357259-8.135084z m34.133219-289.222147l43.235412 236.088102a103.992542 103.992542 0 0 1-38.968759 101.603217A93.468133 93.468133 0 0 1 789.615146 1023.996587c-15.530615 0-32.540336-4.664873-47.67273-12.344848L524.513807 901.344551l-218.22505 109.852078a100.692998 100.692998 0 0 1-107.974751-7.964418c-31.118118-23.60881-47.67273-64.511785-40.163422-102.74099l44.828295-235.860548L31.402562 502.270326A111.729405 111.729405 0 0 1 4.437319 394.807573c12.743069-38.854982 44.202519-66.502889 82.374836-71.338429l239.046314-44.031853 107.064532-220.728153C450.558498 23.039923 486.057046 0 524.570696 0c39.423869 0 77.027299 23.950142 91.761472 58.936692l106.950754 220.386821 237.624097 42.211415c39.253202 5.290649 72.362425 34.360774 82.090393 71.509095 12.458625 38.001651 2.673769 79.132181-25.827469 108.088529l-171.121208 163.498121v-0.056888z"
                fill="#959595"></path>
            </svg>
          </span>
          <span>收藏</span>
        </div>
      </div>

    </div>
    <!-- 信息 End-->
    <!-- 发货地址 -->
    <div class="fahuo">
      <van-cell is-link @click="showPopup">
        <div class="item1">
          <div class="left">
            <span>发货</span>
            <div>
              <span>
                <svg t="1669450412064" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="2709" width="16" height="16">
                  <path
                    d="M543.41 1006.896l-241.63-375.62c-21.271-30.89-45.456-67.076-63.449-105.771-20.398-43.872-30.314-85.203-30.314-126.361 0-89.449 34.833-173.544 98.083-236.794s147.346-98.083 236.796-98.083c89.449 0 173.544 34.833 236.795 98.083 63.25 63.25 98.083 147.346 98.083 236.794 0 89.815-44.03 157.364-90.646 228.877L543.41 1006.896z m-0.514-922.915c-173.781 0-315.165 141.381-315.165 315.163 0 82.981 42.75 151.924 90.373 221.077l0.173 0.259L543.41 970.454l227.169-353.149c45.002-69.04 87.479-134.203 87.479-218.161 0-173.782-141.381-315.163-315.162-315.163z"
                    p-id="2710"></path>
                  <path
                    d="M542.896 476.922c-63.513 0-115.185-51.672-115.185-115.183 0-63.514 51.672-115.186 115.185-115.186 63.512 0 115.184 51.672 115.184 115.186 0 63.511-51.672 115.183-115.184 115.183z m0-210.654c-52.642 0-95.471 42.829-95.471 95.472 0 52.64 42.829 95.469 95.471 95.469 52.641 0 95.468-42.829 95.468-95.469 0-52.643-42.827-95.472-95.468-95.472z"
                    p-id="2711"></path>
                </svg>
              </span>
              {{ goodsData.ShopInformation.ShopArea }}
            </div>
          </div>
          <div class="right">
            <span class="fist">运费</span>
            <span>免运费</span>
          </div>
        </div>
        <div class="item2">
          <span>服务</span>
          <i>{{ goodsData.ShopInformation.Service }}</i>
        </div>
      </van-cell>
      <van-popup v-model="show" position="bottom" round :style="{ height: '30%' }">
        <div class="top">服务保障</div>
        <div class="buttom">
          <div v-for="(item, index) in goodsData.ShopInformation.Services" :key="index">
            <p>
              <img class="img" :src="item.Icon" alt="">
              {{ item.Name }}
            </p>
            <div>{{ item.Value }}</div>
          </div>


        </div>
      </van-popup>
    </div>
    <!-- 发货地址 End-->
    <!-- 好评 -->
    <div class="nice">
      <div class="top">
        <span>商品评价( {{ goodsData.ProductCommentList.CommentCount }} )</span>
        <span>好评率100%></span>
      </div>
      <div class="buttom">
        <div class="items">
          <div class="item" v-for="(item, index) in  goodsData.ProductCommentList.CommentList" :key="index">
            <div class="left">
              <div class="img"><img :src="item.Photo" alt=""></div>
              <div class="text">
                <p>{{ item.UserName }}</p>
                <p>{{ item.ReviewContent }}</p>
              </div>
            </div>
            <div class="rihgt">
              {{ item.ReviewDate }}
            </div>
          </div>
        </div>

      </div>
      <div class="qunbu">查看全部评价</div>
    </div>
    <!-- 好评 End-->
    <!-- 店铺推荐 -->
    <div class="goodList">
      <div class="top">
        <span>店铺推荐</span>
        <span class="unfist">查看全部></span>
      </div>
      <div class="buttom">
        <div class="items">
          <div class="item" v-for="(item, index) in goodsData.ShopHotProducts" :key="index">
            <div class="img"><img :src="item.ProductDefaultImage" alt=""></div>
            <div class="text">
              <div class="fist">{{ item.ProductName }}</div>
              <div class="second">￥{{ item.SalePrice }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 店铺推荐 End-->
    <!-- 品牌介绍 -->
    <div class="pingpaijies">
      <div class="top">
        品牌介绍
      </div>
      <div class="button">
        互助青稞酒以青藏高原特有的粮食作物青稞为原料，在继承古老传统生产工艺的基础上，引进现代技术装备，用无污染的天然优质矿泉水科学配料、精心酿造、久储自然老熟而成。产品具有清香醇厚、绵甜爽净，饮后头不痛、口不渴的独特风格，在强手如林的酒类行业中独树一帜，在西部民族地区享有盛誉。
      </div>
    </div>
    <!-- 品牌介绍 End-->
    <!-- 品牌资讯 -->
    <div class="pingpai">
      <div class="top">
        <span>品牌资讯</span>
        <span class="unfist">更多资讯></span>
      </div>
      <div class="buttom">
        <div class="items">
          <div class="item" v-for="(item, index) in goodsData.GetBrandArticle.articles" :key="index">
            <div class="img">
              <svg viewBox="0 0 1024 1024" width="25px" height="25px" style="display: block;">
                <path
                  d="M806.80781578 462.43792749a15.44952368 15.44952368 0 0 0 15.4495237-15.44952441V372.92338539c0-42.57888818-34.6378324-77.24761987-77.24761987-77.24761916H342.05523657A77.34031701 77.34031701 0 0 0 264.80761742 372.95428467v216.2933352C264.80761742 631.8883059 299.44544982 666.49523902 342.05523657 666.49523902h111.79275513l78.82347132 87.59880066c0.18539429 0.24719214 0.494385 0.30899072 0.67977929 0.52528429 0.21629357 0.154495 0.27809143 0.43258643 0.49438428 0.61798072 0.83427429 0.74157715 1.82304358 1.143265 2.75001574 1.66854858 0.58708215 0.37078857 1.143265 0.83427429 1.76124573 1.08146644a15.2641294 15.2641294 0 0 0 5.80902075 1.23596215 15.2641294 15.2641294 0 0 0 5.80902076-1.23596215c0.61798072-0.24719214 1.17416358-0.71067787 1.76124573-1.08146644 0.92697143-0.52528358 1.91574073-0.92697143 2.75001573-1.66854858 0.21629357-0.154495 0.27809143-0.43258643 0.49438429-0.61798072 0.18539429-0.24719214 0.494385-0.30899072 0.67977929-0.52528429l75.91896057-84.35440064h113.43040443c42.60978675 0 77.24761987-34.6378324 77.24761987-77.24761915v-54.07333398a15.44952368 15.44952368 0 0 0-30.89904809 0v54.07333398c0 25.58441162-20.79505944 46.34857177-46.34857178 46.34857178h-115.96412659a15.44952368 15.44952368 0 0 0-15.2641294 4.48036146l-69.61555481 77.34031701-69.6155548-77.37121558c-0.58708215-0.61798072-1.35955787-0.92697143-2.00843788-1.45225573a15.14053369 15.14053369 0 0 0-12.05062866-6.24160719H342.05523657C316.50172424 635.59619164 295.7066648 614.86293006 295.7066648 589.24761987v-216.2933352C295.7066648 347.36987305 316.50172424 326.60571289 342.05523657 326.60571289h402.95448304c25.55351233 0 46.34857177 20.82595802 46.34857178 46.34857178v74.0650177a15.44952368 15.44952368 0 0 0 15.4495244 15.44952368"
                  fill="gray"></path>
                <path
                  d="M374.22114539 476.58969117a15.44952368 15.44952368 0 0 0 0 30.89904808h64.3936162a15.44952368 15.44952368 0 0 0 0-30.89904808H374.22114539zM514.56462073 476.58969117a15.44952368 15.44952368 0 0 0 0 30.89904808h63.09585619a15.44952368 15.44952368 0 0 0 0-30.89904808h-63.09585619zM652.31257605 476.58969117a15.44952368 15.44952368 0 0 0 0 30.89904808h63.09585619a15.44952368 15.44952368 0 0 0 0-30.89904808h-63.09585619z"
                  fill="gray"></path>
              </svg>
            </div>
            <p>{{ item.Title }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 品牌资讯 End-->
    <!-- 加入购物车 -->
    <div class="jiarugwc">
      <van-goods-action safe-area-inset-bottom>
        <van-goods-action-icon icon="chat-o" :to="{ name: 'mine' }" text="客服" />
        <van-goods-action-icon icon="shop-o" :to="{ name: 'home' }" text="店铺" />
        <van-goods-action-button color="#ff973a" type="warning" @click="addCart" text="加入购物车" />
        <van-goods-action-button color="#f92656" type="danger" text="立即购买" />
      </van-goods-action>
    </div>
    <!-- 加入购物车 End-->
  </div>
</template>
<script>
export default {
  data() {
    return {
      goodsData: null,
      show: false,
      sginID:[
        {
          id:331870,
          sgin:'6e0c38f06f2b50209ed0284955e58536'
        },
        {
          id:95390,
          sgin:'c9907d7fa916546c37c5bb6e83af717b'
        },
        {
          id:675,
          sgin:'0f99a9c1372c04d228aef794f2f6cf35'
        }
      ],
    
    }
  },
  created() {
    
 
    console.log(this.$route.params.id, '这是商品id');
    this.$api.sentGET({
      id:this.$route.params.id,
      sgin:this.sginID.find(item=>{
        if(item.id==this.$route.params.id){
          return item.sgin 
        }
      }).sgin
    }).then(res => {
      // console.log(res, '这是详情页请求');
      this.goodsData = res.Data
      console.log(this.goodsData, '这是详情页请求');
    })
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    addCart(){
      console.log(this.$route.params.id,'这是点击的id');
      if (this.$store.getters.getUserInfo) {
				// this.$toast("点击了加入")
				this.$store.dispatch("addCartAsync", {
					goods_id:this.$route.params.id,
					img_url:this.goodsData.DetailNew.ProductDefaultImage,
					multi_buy_limit: 100,
					price:this.goodsData.DetailNew.SalePrice,
					name:this.goodsData.DetailNew.ProductName,
				}).then(res => {
					this.$toast(res.msg)
				})
			}
			else {
				this.$router.push({
					name: 'login',
					query: {
						next: this.$route.path
					}
				})
			}
    }
  },

}
</script>
<style lang="less" >
.DetailView {


  .swpper {
    font-size: 0;

    .my-swipe .van-swipe-item {
      width: 100%;
      height: 100%;
      color: #fff;
      font-size: 20px;
      // line-height: 150px;
      text-align: center;
      // background-color: #39a9ed;
    }
  }

  .xinxi {
    margin: 10px;
    padding: 10px;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        display: flex;
        flex-direction: column;

        justify-content: space-evenly;

        .fist {
          text-align: left;
          font-size: 30px;

          color: red;
        }

        .unfist {
          text-align: left;
          font-size: 16px;
          color: red;
        }

        b {
          font-size: 16px;
        }
      }

      .riget {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 12px;
      }
    }

  }

  .fahuo {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    .item1 {
      height: 30px;
      line-height: 30px;
      align-items: center;
      display: flex;
      justify-content: space-between;

      .left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #959595;

        div {
          color: #1f1f1f;
          margin-left: 10px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
      }

      .right {
        .fist {
          margin-right: 10px;
          color: #959595;
        }
      }
    }

    .item2 {
      span {
        color: #959595;
      }

      i {
        margin-left: 10px;
      }
    }

    .van-popup {
      .img {
        width: 16px;
        height: 16px;
      }

      .top {
        margin: 10px;
        border-bottom: 1px solid #bbb;
      }

      .buttom {
        height: 75%;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        text-align: left;
        font-size: 20px;

        p {
          color: red;
        }

        div {
          font-size: 6px;
          color: #959595;
        }
      }
    }
  }

  .goodList {
    .top {
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      margin: 10px;

      .unfist {
        color: #959595;
      }
    }

    .buttom {
      .items {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center;

        .item {
          margin: 10px;
          width: 28%;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          font-size: 16px;
          align-items: flex-start;

          .img {}

          .text {
            text-align: left;

            .fist {}

            .second {
              color: red;
            }
          }
        }
      }
    }
  }

  .nice {
    .top {
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px;
      padding: 10px;
    }

    .buttom {
      .items {
        display: flex;
        flex-direction: column;
        margin: 10px;
        justify-content: space-evenly;
        align-items: center;

        .item {
          margin: 10px;
          padding: 10px;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .left {
            width: 50%;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .img {
              margin-right: 10px;
              width: 32px;
              height: 32px;
            }

            .text {
              font-size: 16px;
            }
          }

          .rihgt {
            font-size: 16px;
            color: #959595;
          }
        }
      }
    }

    .qunbu {
      font-size: 20px;
      border: 1px solid #bbb;
      padding: 10px;
      margin: 10px;
      border-radius: 20px;
      width: 53%;
      margin: 10px auto;
    }
  }

  .pingpaijies {
    width: 96vw;
    text-align: left;
    font-size: 16px;
    margin: 10px;
    padding: 10px;

    .top {
      margin-bottom: 5px;
      border-bottom: #959595 1px solid;
    }
  }

  .pingpai {
    width: 96vw;
    .top {
      margin: 10px;
      padding: 10px;
      font-size: 16px;
      display: flex;
      justify-content: space-between;

      .unfist {
        color: #959595;
      }

    }

    .buttom {
      .items {
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;

        .item {
          width: 100%;
          border-bottom: 1px solid #bbb;
          display: flex;
          justify-content: flex-start;
          margin: 10px;
          padding: 10px;
          align-items: center;

          .img {
            margin-right: 10px;
          }

          p {
            font-size: 15px;
          }
        }
      }
    }
  }

}
</style>

